<template>
	<view>
		<z-paging ref="paging" v-model="list" @query="getList">
			<view class="button-area">
				<image class="button-background" src="../../static/button-background.png" mode=""></image>
				<view class="orange-button">
					<view class="button">
						<image :style="choosevote?'visibility:visible':'visibility:hidden'" class="button-img" src="../../static/orange-button.png" mode=""></image>
					</view>
					<view class="button">
						<image :style="choosebest?'visibility:visible':'visibility:hidden'" class="button-img" src="../../static/orange-button.png" mode=""></image>
					</view>
					<view class="button">
						<image :style="chooselocal?'visibility:visible':'visibility:hidden'" class="button-img" src="../../static/orange-button.png" mode=""></image>
					</view>
				</view>
				<view class="button-text">
					<view :style="choosevote?'color: #FFFFFF':'color: #ADB0AE'" class="button-text-son" @click="chooseVote"><text>投票活动</text></view>
					<view :style="choosebest?'color: #FFFFFF':'color: #ADB0AE'" class="button-text-son" @click="chooseBest"><text>精品</text></view>
					<view :style="chooselocal?'color: #FFFFFF':'color: #ADB0AE'" class="button-text-son" @click="chooseLocal"><text>本地资源</text></view>
				</view>
			</view>
			<Best style="position: relative;bottom: 70px;" :list="list"></Best>
		</z-paging>
	</view>
</template>

<script>
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	import Best from '@/pages/community/component/cocreate/best.vue';
	export default{
		components: {
			Best
		},
		data(){
			return {
				list:[],
				choosevote:false,
				choosebest:true,
				chooselocal:false,
				
			}
		},
		methods:{
			/**
			 * 数据
			 */
			getList(pageNo, pageSize){
				var uri = app.globalData.config.interfaces.URL_COMMUNITY_LIST;
				var params={
					"pageNum": pageNo,
					"pageSize": pageSize,
					"loginId": app.getUserId(),
					"isRecommend": 1
				}
				network.get(uri, params, 'form').then(res => {
					if(res.code==200){
						this.list=res.data.list
					}else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},
			// 投票活动
			chooseVote(){
				this.choosevote=true
				this.choosebest=false
				this.chooselocal=false
			},
			//精品
			chooseBest(){
				this.choosevote=false
				this.choosebest=true
				this.chooselocal=false
			},
			//本地资源
			chooseLocal(){
				this.choosevote=false
				this.choosebest=false
				this.chooselocal=true
			},
		}
	}
</script>

<style>
	.button-area {
		padding:16px 16px 0px 16px;
	}
	.button-background {
		width: 100%;
		height: 40px;
	}
	.orange-button {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		bottom: 45px;
	}
	.button {
		width: 100%;
		height: 40px;
	}
	.button-img {
		width: 100%;
		height: 40px;
	}
	/* 投票活动橘色 */
	.button-img-vote {
		width: 100%;
		height: 40px;
		visibility:visible;
	}
	/* 精品橘色 */
	.button-img-best {
		width: 100%;
		height: 40px;
		visibility:hidden;
	}
	/* 本地资源橘色 */
	.button-img-local {
		width: 100%;
		height: 40px;
		visibility:hidden;
	}
	.button-text {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		bottom: 85px;
	}
	.button-text-son {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.button-text-vote {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
	}
	.button-text-best {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ADB0AE;
	}
	.button-text-local {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ADB0AE;
	}
</style>